<template>
  <div class="green">
    <h1>{{count}}</h1>
    <h1>{{formatterSex}}</h1>
    <h1>{{formatterUserList}}</h1>
    <h1>{{getByName('zhangsan')}}</h1>
    <h1>{{getNanSize}}</h1>
    <div>
      <button @click="fn1()">获取count数据</button>
      <button @click="fn2()">自增</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
    }
  },

  computed: {
    ...mapState(['count', 'msg', 'user', 'userList']),
    ...mapGetters(['formatterSex', 'formatterUserList', 'getByName', 'getNanSize'])
  },
  methods: {
    //使用vuex辅助函数已经声明的属性或者方法就不要在本组件data或methods里面再次声明
    ...mapMutations(['add123', 'addValue']),
    ...mapActions(['add']),
    fn1 () {
      console.log(this.count);
    },
    fn2 () {
      this.add();
    }
  }

}
</script>

<style lang="less" scoped>
.green {
  flex: 1;
  background: green;
}
</style>